<template>
  <div class="registerContainer">
    <img class="logo" src="../assets/logo.png" />
    <van-nav-bar left-arrow @click-left="onClickLeft" :title="title" :fixed="true" />


    <div class="container">
      <van-cell-group>
        <van-field v-model="username" left-icon="contact" label="用户名" placeholder="请输入用户名" />
        <van-field v-model="nickname" left-icon="contact" label="昵称" placeholder="请输入昵称" />
        <van-field v-model="sex" left-icon="contact" label="性别" placeholder="请输入性别" />
        <van-field v-model="age" left-icon="contact" label="年龄" placeholder="请输入年龄" />
        <van-field v-model="birthday" left-icon="contact" label="生日" placeholder="格式如:yyyy-MM-dd" />
        <van-field v-model="phone" left-icon="phone-o" label="手机号" placeholder="请输入手机号" />
        <van-field v-model="password" left-icon="eye-o" type="password" label="密码" placeholder="请输入密码" />
      </van-cell-group>

      <van-button color="#000" size="large" class="next" @click="next">下一步</van-button>
    </div>
  </div>
</template>

<script>
  import api from '../api/api_pro';

  export default {
    name: 'register',
    data() {
      return {
        title: '注册',
        username: '',
        nickname: '',
        sex: '',
        age: '',
        birthday: '',
        phone: '',
        password: '',
      };

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onChange(event) {
          const { picker, value, index } = event.detail;
          Toast(`当前值：${value}, 当前索引：${index}`);
        },
      next() {
        let params = new FormData();
        params.append("username",this.username);
        params.append("nickname",this.nickname);
        params.append("sex",this.sex);
        params.append("age",this.age);
        params.append("birthday",this.birthday);
        params.append("phone",this.phone);
        params.append("password",this.password);
        
        api.register(params).then(res => {
                  
          if (res.code === 200) {
            this.$router.push('/login')
          }
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .registerContainer {
    /*登陆单独背景色*/
    position: fixed;
    width: 100%;
    height: 100%;
    padding-top: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .container {
    padding-top: 5%;
  }

  .next {
    margin-top: 10%;
  }
</style>
